<template>
	<view>
		<view class="">
			<button type="button" name="button" @click="offClose">模态框</button>
		</view>
		<view class="dialog-modal">
			<view class="dialog-wrapper" v-show="isShow" @click="onClose"></view>
			<transition name="drop">
				  <view class="dialog-container" v-show="isShow">
					<slot>
						<view class="content-bigbox">
							<view class="flex content1">
								<view class="text-box flex">
									<picker @change="PickerChangeAge" :value="index" :range="agePicker">
										<view class="picker">
											{{index>-1?agePicker[index]:'年龄'}}
										</view>
									</picker>
									<text class="lg text-gray cuIcon-triangledownfill"></text>
								</view>
								<view class="text-box te1 flex">
									<picker @change="PickerChangeSex" :value="index1" :range="SexPicker">
										<view class="picker">
											{{index1>-1?SexPicker[index1]:'性别'}}
										</view>
									</picker>
									<text class="lg text-gray cuIcon-triangledownfill"></text>
								</view>
								<view class="text-box te2 flex">
									<picker mode="region" @change="RegionChange" :value="region">
										<view class="picker overflow">
											{{region[0]}}，{{region[1]}}，{{region[2]}}
										</view>
									</picker>
									<text class="lg text-gray cuIcon-triangledownfill"></text>
								</view>
							</view>
							<view class="flex content1">
								<view class="text-box te4 flex">
									<picker @change="PickerChange" :value="index" :range="picker">
										<view class="picker">
											{{index>-1?picker[index]:'一级人才'}}
										</view>
									</picker>
									<text class="lg text-gray cuIcon-triangledownfill"></text>
								</view>
								<view class="text-box te5 flex">
									<picker @change="PickerChange" :value="index" :range="picker">
										<view class="picker">
											{{index>-1?picker[index]:'任务-行业'}}
										</view>
									</picker>
									<text class="lg text-gray cuIcon-triangledownfill"></text>
								</view>
								<view class="text-box te6 flex">
									<picker @change="PickerChange" :value="index" :range="picker">
										<view class="picker">
											{{index>-1?picker[index]:'任务-生产线'}}
										</view>
									</picker>
									<text class="lg text-gray cuIcon-triangledownfill"></text>
								</view>
							</view>
							<view class="btm-btn" @click="onClose">
								确定
							</view>
						</view>
					</slot>
				  </view>
			</transition>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			isShow: false,
			agePicker: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13'], //年龄数据
			SexPicker:['男','女'], //性别数据
			region: ['广东省', '广州市', '海珠区'], //城市
			index: -1,
			index1:-1,
		}
	},
	methods: {
		// 城市
		RegionChange(e) {
			uni.hideKeyboard();
			this.region = e.detail.value
		},
		// 年纪
		PickerChangeAge(e) {
			uni.hideKeyboard();
			this.index = e.detail.value
			// console.log(this.index)
			// console.log(this.agePicker[this.index])
		},
		// 性别
		PickerChangeSex(e) {
			uni.hideKeyboard();
			this.index1 = e.detail.value
			// console.log(this.index1)
			// console.log(this.SexPicker[this.index1])
			
		},
		offClose() {
			this.isShow = !this.isShow;
		},
		onClose() {
			this.isShow = false;
		}
	}
}
</script>
<style scoped lang="stylus">
	.content-bigbox{
		padding:42upx 40upx;
		.content1{
			justify-content space-between;
			margin-bottom:30upx;
			.text-box{
				height:50upx;
				width:130upx;
				background:#F3F3F3;
				font-size:28upx;
				font-weight:400;
				color:rgba(153,153,153,1);
				justify-content:space-between;
				// padding:0 8upx 0 18upx;
				padding-left:18upx;
				align-content center;
				align-items:center;
			}
			.te1{
				width:142upx;
				
			}
			.te2{
				width:356upx;
				
			}
			.overflow{
				white-space: nowrap;
				overflow: hidden;
				text-overflow:ellipsis;
				width:310upx;
			}
			.te3{
				width:172upx;
				
			}
			.te4{
				width:160upx;
			}
			.te5{
				width:236upx;
			}
			.te6{
				width:236upx;
			}
		}
		.btm-btn{
			height:80upx;
			width:670upx;
			margin:50upx auto 0;
			background:linear-gradient(90deg,rgba(74,144,226,1) 0%,rgba(0,102,220,1) 100%);
			border-radius:2upx;
			text-align center;
			line-height 80upx;
			font-size:32upx;
			font-weight:400;
			color:rgba(255,255,255,1);
		}
	}
	.dialog-modal {
		position: absolute;
		z-index: 5;
	}
	.dialog-wrapper {
		position: fixed;
		height: 100%;
		width: 100%;
		z-index: 5;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.dialog-wrapper {
		background-color: #000;
		opacity:0.2;
	}
	.dialog-container {
		position: fixed;
		z-index: 80;
		top:0;
		left:0;
		width: 100%;
		height:344upx;
		background-color:#fff;
		
	}
	span.close-btn {
		padding: 5px 10px;
		float: right;
		cursor: pointer;
		font-size: 16px;
		font-weight: bold;
	}
</style>
